import { useLoad, useReady } from "@tarojs/taro"
import { Button, View } from "@tarojs/components";
import request from "@/utils/request.js";
import "./acInfo.scss";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-react-taro";
import { Image } from "@nutui/nutui-react-taro";
import { useState } from "react";
definePageConfig({
    navigationStyle: "custom",
});
export default function actInfo() {

    let activityId = ''
    useLoad((opsetion) => {
        activityId = opsetion.activityId
    })

    useReady(() => {
        getActInfo();
    })

    const [actInfo, setActInfo] = useState<any>([{}])
    const getActInfo = () => {
        request({ url: 'api/social/activity/info', data: { activityId: activityId } }).then(res => {
            setActInfo(res.data)
        })
    }
    const shouchangClick = () => {
        if (actInfo.bookmarkCount) {
            request({ url: 'api/social/activity/cancelBookmark',method:'POST' ,data: { activityId: activityId } }).then(() => {
                getActInfo()
            })
        } else {
            request({ url: 'api/social/activity/bookmark',method:'POST', data: { activityId: activityId } }).then(() => {
                getActInfo()
            })
        }
    }
    return (
        <View>
            <View className="navigation">
                <IconFont fontClassName="icon-fanhui " className="navigation-left" classPrefix="iconfont" color="#2A2B30" onClick={() => { Taro.navigateBack() }} size={16} />
                <View className="navigation-middle">活动详情</View>
                <View className="navigation-right">
                    <IconFont fontClassName={actInfo.bookmarkCount ? "icon-shoucang" : "icon-shoucang1"} onClick={shouchangClick}  classPrefix="iconfont" color="#2A2B30" size={22} />
                    {/* <IconFont fontClassName="icon-share" style={{ marginLeft: '20rpx' }} classPrefix="iconfont" color="#2A2B30" size={21} /> */}
                </View>
            </View>
            <View className="actTitle">
                <View className="card">
                    <Image mode="aspectFill"
                        width={160}
                        height={160}
                        radius={6} src={actInfo.imgUrls}></Image>
                    <View className="card-right">
                        <View className="actTitle-title">{actInfo.typeName}</View>
                        <View className="">{actInfo.typeName}</View>
                        <View className="">感兴趣：{actInfo.bookmarkCount}人</View>
                    </View>
                </View>

                <View  ><IconFont fontClassName="icon-time" classPrefix="iconfont" color="#2A2B30" size={18} />   07.30 周二10:00-23:30</View>
                <View  ><IconFont fontClassName="icon-dizhiguanli" classPrefix="iconfont" color="#2A2B30" size={20} />  天源路5号(地铁3.6号线天河客运站A.D出口)  </View>
                <View onClick={()=>{
                    Taro.makePhoneCall({
                        phoneNumber: actInfo.contact,
                      })
                }} style={{ display: 'flex', justifyContent: 'space-between' }}>活动发起人：{actInfo.initiatorNickname} <IconFont fontClassName="icon-dianhua" classPrefix="iconfont" color="#2A2B30" size={20} /></View>
                <View >已满员：30</View>
            </View>

            <View className="actDes">
                <View>
                    <View className="title">活动描述</View>
                    <View className="yellow-bar"></View>
                </View>
                <View className="content">{actInfo.introduce}</View>
            </View>

            <View className="actDes">
                <View>
                    <View className="title">活动图片</View>
                    <View className="yellow-bar"></View>
                </View>
                <Image 
                className="content"
                    mode="aspectFill"
                    height={300}
                    radius={6} src={actInfo.imgUrls}></Image>
            </View>

            <View className="actDes">
                <View>
                    <View className="title">加入后内容</View>
                    <View className="yellow-bar"></View>
                </View>
                <View className="content">{actInfo.showToParticipants}</View>
            </View>

            <View  className="bottom">
            <View>
            <IconFont fontClassName= "icon-liuyan"  classPrefix="iconfont" color="#2A2B30" size={26} />
            <View style={{marginTop:'10rpx'}}>留言</View>
            </View>
            <Button className="global_button" style={{width:'400rpx',marginLeft:'280rpx'}}>马上加入</Button>
            </View>

        </View>)


}